@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';




.btn-red {
    @apply bg-red-700 text-white font-bold py-2 px-2 rounded
}
.btn-red:hover {
    @apply bg-red-800 cursor-pointer;
}

.btn-red:disabled,
.btn-red[disabled] {
  @apply bg-gray-700;
}

.btn-red-outline {
  @apply border border-red-700 text-red-700 font-bold py-2 px-2 rounded;
}
.btn-red-outline:hover {
  @apply bg-red-800 text-white;
}

.btn-red-small-outline {
  @apply border border-red-700 text-red-700 font-bold py-1 px-1 text-xs rounded;
}

.btn-red-small-outline:hover {
  @apply bg-red-800 text-white cursor-pointer;
}

.btn-red-large {
    @apply bg-red-700 text-white font-bold py-4 px-4 rounded;
}
.btn-red-large:hover {
    @apply bg-red-800;
}

.btn-red-large-outline {
    @apply border border-red-700 text-red-700 font-bold py-4 px-4 rounded;
}
.btn-red-large-outline:hover {
    @apply bg-red-800 text-white;
}

.btn-blue {
    @apply bg-blue-700 text-white font-bold py-2 px-2 rounded;
}

.btn-blue:hover {
    @apply bg-blue-800;
}

.btn-green {
  @apply bg-green-600 text-white font-bold py-2 px-2 rounded;
}

.btn-green:hover {
  @apply bg-green-800;
}

.btn-grey {
    @apply border-gray-400 border text-gray-700 font-bold py-2 px-2 rounded;
}
.btn-grey:hover {
    @apply bg-gray-900 text-white;
}


.loader {
    border: 4px solid #ffffff;
    border-top: 4px solid #C53030;
    border-right: 4px solid #C53030;
    border-radius: 50%;
    animation: spin 2s linear infinite;
  }
  
@keyframes spin {
  0% {
    transform: rotate(0deg); 
  }
  100% {
    transform: rotate(360deg); 
  } 
}

a {
  @apply text-red-700 border-b border-red-700
}

a:hover {
  @apply text-red-900 border-b border-red-900
}

p {
  @apply mt-4
}

h3 {
  @apply text-2xl mt-4 font-bold
}

h4 {
  @apply text-xl mt-4 font-bold
}

blockquote {
  @apply p-4 bg-gray-200 mt-4
}

ul {
  @apply mt-2
}

.starburst path {
  fill: #FFFF00
}

.starburst:hover path {
  fill: #CAC000
}

.starburst text {
  fill: #000000
}

.starburst:hover text {
  fill: #FF0000
}

@media (max-width: 768px) { 

  .example-arrow{
    transform: rotate(90deg);
  }
}

.swatch:hover {
  @apply bg-gray-700 border-2 shadow-inner
  /* animation: throb .5s ease; */
}

@keyframes throb {
50% {
  border: 2px solid black;

}
}

#palette button {
  font-size: 14px;
}
            

